<!doctype html>
<html lang="en" class="feedback">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <link rel="stylesheet" href="../css/mui.css" />
  <link rel="stylesheet" href="../css/feedback.css" />
  <link rel="stylesheet" href="../css/mui.picker.css" />
  <link rel="stylesheet" href="../css/mui.poppicker.css" />
  <link rel="stylesheet" href="../css/mui.picker.min.css" />

  <style type="text/css">
    .text-black {
      color: #444 !important;
    }
    
    .at-img-wrapper {
      display: flex;
      align-items: center;
    }
    
    .at-img-edit {
      padding: 0 !important;
      margin-left: 5px;
      margin-bottom: 0;
    }
    
    .at-ipt-edit {
      margin-bottom: 0 !important;
    }
    
    .at-tip {
      font-size: 14px;
      color: #8f8f94 !important;
    }
    
    .at-tip-active {
      font-size: 14px;
      color: #444;
    }
  </style>
</head>

<body>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">确认</button>
    <h1 class="mui-title">照片识别</h1>
  </header>
  <div class="mui-content">
    <div class="mui-content-padded at-img-wrapper">
      <h4 class="mui-inline text-black">照片识别:</h4>
      <p class="at-img-edit">图片(选填,提供问题截图,总大小10M以下)</p>
    </div>
    <div id='image-list' class="row image-list"></div>
  </div>
</body>
<script src="../js/mui.js"></script>
<script src=" ../js/feedback.js"></script>
<script src="../js/mui.picker.js"></script>
<script src="../js/mui.picker.min.js"></script>
<script src="../js/mui.poppicker.js"></script>
<script src="../js/city.data-3.js"></script>
<script type="text/javascript">
  (function($, doc) {
    $.init();
    $.ready(function() {
      /**
       * 获取对象属性的值
       * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
       * @param {Object} obj 对象
       * @param {String} param 属性名
       */
      function _getParam(obj, param) {
        return obj[param] || '';
      };

      var cityPicker3 = new $.PopPicker({ layer: 3 }),
        showCityPickerButton = doc.getElementById('addAddress'),
        selectSartTime = doc.getElementById('selectSartTime'),
        selectEndTime = doc.getElementById('selectEndTime');

      cityPicker3.setData(cityData3);

      selectSartTime.addEventListener('tap', unselectedTip1, false);
      selectEndTime.addEventListener('tap', unselectedTip2, false);

      showCityPickerButton.addEventListener('tap', function(event) {
        cityPicker3.show(function(items) {
          showCityPickerButton.innerText = _getParam(items[0], 'text') + " " + _getParam(items[1], 'text') + " " + _getParam(items[2], 'text');
          showCityPickerButton.className = 'mui-navigate-right at-tip-active';
          selectSartTime.removeEventListener('tap', unselectedTip1);
          selectSartTime.addEventListener('tap', selectTime.bind(selectSartTime, selectSartTime), false);

          //返回 false 可以阻止选择框的关闭
          //return false;
        });
      }, false);

      // var selectEndTime = doc.getElementById('selectEndTime');
      // selectEndTime.addEventListener('tap', selectTime.bind(selectEndTime, selectEndTime), false);

      function unselectedTip1() {
        $.toast('添加任务地点');
      }

      function unselectedTip2() {
        $.toast('添加任务开始时间');
      }

      function selectTime(value) {
        var _self = this;
        if (_self.picker) {
          _self.picker.show(function(rs) {
            value.innerText = rs.text;
            value.className = 'mui-navigate-right at-tip-active';
            _self.picker.dispose();
            _self.picker = null;
          });
        } else {
          var optionsJson = this.getAttribute('data-options') || '{}',
              options = JSON.parse(optionsJson),
              id = this.getAttribute('id'),
              flag = this.getAttribute('data-flag');
          /*
           * 首次显示时实例化组件
           * 示例为了简洁，将 options 放在了按钮的 dom 上
           * 也可以直接通过代码声明 optinos 用于实例化 DtPicker
           */
          _self.picker = new $.DtPicker(options);
          _self.picker.show(function(rs) {
            /*
             * rs.value 拼合后的 value
             * rs.text 拼合后的 text
             * rs.y 年，可以通过 rs.y.vaue 和 rs.y.text 获取值和文本
             * rs.m 月，用法同年
             * rs.d 日，用法同年
             * rs.h 时，用法同年
             * rs.i 分（minutes 的第二个字母），用法同年
             */
            value.innerText = rs.text;
            value.className = 'mui-navigate-right at-tip-active';

            if(flag === 'start') {
              selectEndTime.removeEventListener('tap', unselectedTip2);
              selectEndTime.addEventListener('tap', selectTime.bind(selectEndTime, selectEndTime), false);
            }

            /* 
             * 返回 false 可以阻止选择框的关闭
             * return false;
             */
            /*
             * 释放组件资源，释放后将将不能再操作组件
             * 通常情况下，不需要示放组件，new DtPicker(options) 后，可以一直使用。
             * 当前示例，因为内容较多，如不进行资原释放，在某些设备上会较慢。
             * 所以每次用完便立即调用 dispose 进行释放，下次用时再创建新实例。
             */
            _self.picker.dispose();
            _self.picker = null;
          });
        }

      }
    });
  })(mui, document);
</script>

</html>